<template>
  <div >
    <div style="height: 150px;width: 100%;background-color: #f5f5f6; overflow-x: paged-x;min-width: 1000px">
      <el-col :span="3" :offset="1">
        <div class="title_div" style="width: 200px" @click="toHome()">
          <h2 class="title_h2">
            <i class="el-icon-s-home"></i>
            弄个房租</h2>
        </div>
      </el-col>
      <el-col :span="5" :offset="14">
        <div v-if="!user.nickname" style="margin-top: 10px" @click="toLoginAndRegister()">
          <el-avatar :size="40" src="../../../../static/image/noLoginHeadImage.png"></el-avatar>
          <span class="login_register" style="color: black;font-size: 18px">登录/注册</span>
        </div>
        <div v-else style="margin-top: 10px">
          <el-avatar :size="40"
                     :src="user.headImage?'http://192.168.123.150/'+user.headImage:'../../../../static/image/noLoginHeadImage.png'"></el-avatar>
          <el-popover
            placement="bottom"
            width="60px"
            style="padding: 0px;"
            trigger="hover">
            <ul class="my_ul" style="list-style: none;padding: 0px 20px 0px 20px">
              <li style="margin-top: 5px" @click="showMessage()">消息</li>
              <li style="margin-top: 5px" @click="logout()">退出</li>
            </ul>
            <!--              <el-button >click 激活</el-button>-->
            <span class="login_register" slot="reference"
                  style="color: black;font-size: 18px">{{ user.nickname }}</span>
          </el-popover>
        </div>
      </el-col>
      <el-col>
        <div style="width: 50%;margin-left: 25%">
          <el-input v-model="text" placeholder="请输入商圈、小区名开始找房">
            <el-button slot="append" @click="search()" style="background-color: #00ae66;color: white;border: none">开始找房
            </el-button>
          </el-input>
        </div>
      </el-col>
    </div>

    <div style="width: 60%;margin-left: 20%;min-width: 800px">
      <ul style="padding: 0px">
        <li style="margin-top: 20px;display: block;height: 100px" v-for="(item,key) in dataList" :key="key">
          <div style="width: 100%">
            <div style="float: left;width: 20%;display: inline-block;height: 100px;background-color: white;">
              <el-image
                style="width: 140px;height: 100px;border-radius:5px"
                ref="myImg"
                :src="item.fwzp[0]"
                :preview-src-list="item.fwzp">
              </el-image>
            </div>
            <div style="float: left;z-index:9999;height: 100%;width: 50%;display: inline-block;text-align: left">
              <div style="float: top"><h3>{{ getDictLabel(item.zffs, dictZFFS) }}* {{ item.xqxx.xqmc }}
                {{ getDictLabel(item.fwlx, dictFWLX) }}
                <i class="el-icon-s-promotion" @click="toLocal(item.xqxx.center)" title="去这里"></i>
              </h3></div>
              <div style="float: top;font-size: 6px">
                <span>{{ getDictLabel(item.zffs, dictZFFS) }} /   {{
                    item.czmj
                  }} m²   /   {{ getDictLabel(item.fwlx, dictFWLX) }} </span>
                <span v-if="item.sqxx">/ {{ item.sqxx.sqmc }} </span>
              </div>

            </div>
            <div style="width: 20%;display: inline-block;color: red;float: right">
              <h3> {{ item.czje }}元/月</h3>
              <i style="color: #00ae66" class="el-icon-chat-dot-round" @click="toTalking(item.fdxx.id)" title="联系他"></i>
            </div>
          </div>
        </li>
      </ul>
      <div style="margin: 40px;height: 100px">
        <el-pagination
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog
        :before-close="handleClose"
        :append-to-body="true"
        title="位置信息"
        :visible.sync="dialogVisible"
        width="750px">
        <div style="min-height: 550px">
          <div style="height: 400px">
            <el-amap vid="amapDemo"
                     :center="center" :zoom="15"
                     :pitch="66">
              <el-amap-marker :position="center">
              </el-amap-marker>
            </el-amap>
          </div>
          <div style="margin-top: 30px">
            <el-form ref="surroundForm" :model="surroundForm" label-width="120px">
              <el-form-item label="周边配套搜索：" prop="surroundText">
                <el-input v-model="surroundForm.surroundText">
                  <el-button slot="append" type="primary" icon="el-icon-search" @click="searchSurround()">搜索</el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <ul>
              <li v-for="(item,key) in surroundData" :key="key" style="padding: 10px;display: block;height: 70px">
                <div style="float: left;width: 650px;background-color: rgba(128,128,128,0.1)">
                  <h4 style="margin-top: 0px;">{{ item.name }}</h4>
                  <span>{{ item.adname }}</span>
                  <span>{{ item.address }}</span>
                </div>
                <!--                <span>{{item.name}}———{{item.adname}}————{{item.address}}</span>-->
              </li>
            </ul>
          </div>
        </div>
      </el-dialog>
      <ChatRoom ref='chatRoom' v-on:clearToUser="clearToUser" :to-user="toUser" :randomString="randomString"></ChatRoom>
      <MyMessageList :user="user" :random-string="randomString1"></MyMessageList>
    </div>
  </div>
</template>

<script>
import ChatRoom from "../components/ChatRoom";
import MyMessageList from "../components/MyMessageList";
export default {
  name: "RentalModule",
  components: {ChatRoom,MyMessageList},
  data() {
    return {
      user: {
        nickname: '',
        headImage: '',
        userId: '',
      },
      toUser: {
        name: '',
        id: '',
        headImage: ''
      },
      text: '',
      total: 0,
      pageNo: 1,
      pageSize: 5,
      dataList: [],
      dictFWLX: [],
      dictZFFS: [],
      area: {
        areaName: '',
        areaId: ''
      },
      dialogVisible: false,
      surroundForm: {
        surroundText: '',
      },
      surroundData: [],
      randomString: '',
      randomString1: '',
      center: [],
    }
  },
  mounted() {
    this.area = JSON.parse(localStorage.getItem("area"))
    this.$getDict('FWLX').then(res => {
      this.dictFWLX = res
    })
    this.$getDict('ZFFS').then(res => {
      this.dictZFFS = res
    })
    this.getUserInfo()
    this.text = this.$route.query.text
    this.getDataList()
  },
  methods: {
    showMessage(){
      this.randomString1 = Math.random().toString(36).slice(-6);
    },
    toTalking(id) {
      if (!this.user.userId){
        this.$message.error("请先登录！")
        return ;
      }
      this.$axios({
        url: '/getUserByid',
        method: "get",
        params: {id: id}
      }).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          this.toUser = {
            id: data.id,
            name: data.nickname,
            headImage: data.headImage
          }
        } else {
          this.$message.error("操作失败，请联系管理员！")
        }
      })
    },
    openChat() {
      this.randomString = Math.random().toString(36).slice(-6);
    },
    searchSurround() {
      this.$axios({
        url: '/gaode/getSurround',
        method: "get",
        params: {
          location: this.center.join(','),
          keywords: this.surroundForm.surroundText
        }
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.data.length > 5) {
            this.surroundData = res.data.data.splice(5)
          } else {
            this.surroundData = res.data.data
          }
        }
      })
    },
    toLocal(center) {
      this.center = center.split(',')
      this.dialogVisible = true
    },
    search() {
      this.pageSize = 20
      this.pageNo = 1
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getDataList()
    },
    getDataList() {
      let area = JSON.parse(localStorage.getItem("area"));
      this.$axios({
        url: '/getRentalList',
        method: "get",
        params: {
          "qywzid": area.areaId,
          "sfsp": '02',
          "sqmc": this.text,
          "pageNo": this.pageNo,
          "pageSize": this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data.data
          this.total = res.data.data.total
          this.dataList = []
          data.forEach(item => {
            let itemData = item
            let fwzp = []
            item.fwzp.forEach(item => {
              fwzp.push("http://192.168.123.150/" + item.path)
            })
            itemData.fwzp = fwzp
            this.dataList.push(itemData)
          })
        }
      })
    },
    toHome() {
      this.$router.push({path: "/"})
    },
    getUserInfo() {
      this.$axios({
        method: "get",
        url: "/getUserInfo"
      }).then(res => {
        if (res.data.code === 200) {
          let user = res.data.data
          this.$store.commit("setUserId", user.id)
          this.$store.commit("setNickname", user.nickname)
          this.$store.commit("setName", user.username)
          this.$store.commit("setHeadImage", user.headImage)
          this.$store.commit("setRoleList", JSON.stringify(user.roleList))
          sessionStorage.setItem("roleList", user.roleList)
          this.user = {
            userId: user.id,
            userName: user.username,
            nickname: user.nickname,
            headImage: user.headImage
          }
        }
      })
    },
    logout() {
      this.$store.dispatch("logout");
      localStorage.removeItem("Authorization");
      this.$router.push({path: "/"})
    },
    toLoginAndRegister() {
      this.$router.push({path: "/login"})
    },
    getDictLabel(value, list) {
      let res = this.$getDictLabel(value, list)
      return res
    },
    handleClose() {
      this.dialogVisible = false
      this.surroundForm.surroundText = ""
      this.center = []
      this.surroundData = []
    },
    clearToUser() {
      this.toUser = {
        name: '',
        id: '',
        headImage: ''
      }
    }
  },
  watch: {
    'toUser.id'(val) {
      if (val == this.user.userId) {
        this.$message.warning("该房源是你的！")
        this.clearToUser()
        return;
      }
      if (val !== '') {
        this.openChat();
      }
    }
  }
}
</script>

<style scoped>
.title_div :hover {
  cursor: pointer;
}

.my_ul li:hover {
  background-color: #404040;
  cursor: pointer;
}

</style>
